<script setup>
import { ref, onMounted } from 'vue'
import { getAll } from '@/api/api'
import Table from './table.vue'
import SearchForm from './SearchForm.vue'
import Pagination from './Pagination.vue'

const tableRef = ref(null)
const searchFormRef = ref(null)
const paginationRef = ref(null)

const handleQuery = async() => {
  const params = searchFormRef.value.queryParams
  const res = await getAll(
    params.name,
    params.gender,
    paginationRef.value.currentPage,
    paginationRef.value.pageSize
  )
  tableRef.value.projectList = res.data.rows
  paginationRef.value.total = res.data.total
}

// 处理子组件成功事件
const handleSuccess = () => {
  handleQuery() // 刷新数据
}

onMounted(() => {
  handleQuery()
})
</script>

<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <SearchForm 
      ref="searchFormRef" 
      @query="handleQuery" 
      @reset="handleQuery"
    />

    <!-- 表格 -->
    <Table ref="tableRef" @list="handleSuccess" />

    <!-- 分页条 -->
    <Pagination 
      ref="paginationRef"
      @size-change="(val) => {
        paginationRef.value.pageSize = val
        handleQuery()
      }"
      @current-change="(val) => {
        paginationRef.value.currentPage = val
        handleQuery()
      }"
    />
  </div>
</template>

<style scoped>
</style>